<template>
  <view
    :style="`width:${attr.width}rpx;height:${attr.height}rpx `"
    class="overflow"
    :class="[attr.disabled ? 'opacity-7' : '']"
  >
    <movable-area
      :style="{
        width: attr.width * 2 + 'rpx',
        height: attr.height + 'rpx',
        transform: `translateX(-${_cellwidth}px)`,
      }"
    >
      <movable-view
        :animation="_animation"
        :style="{
          width: attr.width + 'rpx',
          height: attr.height + 'rpx',
        }"
        :x="_cellwidth"
        disabled
        direction="horizontal"
        class="flex flex-1 flex-row flex-between"
      >
        <view></view>
        <view class="flex flex-row flex-row-center-end">
          <tm-sheet
            no-level
            hover-class="opacity-7"
            @click="actionClick(item, index)"
            :margin="[0, 0]"
            :padding="[0, 0]"
            v-for="(item, index) in list"
            :key="index"
            :color="item.color"
            :height="attr.height"
            :width="item.width"
            _class="flex-center flex-row"
          >
            <tm-icon
              :font-size="26"
              _class="pr-8"
              v-if="item.icon"
              :userInteractionEnabled="false"
              :name="item.icon"
            ></tm-icon>
            <tm-text :userInteractionEnabled="false" :label="item.text"></tm-text>
          </tm-sheet>
        </view>
      </movable-view>
      <movable-view
        :animation="_animation"
        @click="onclick"
        @touchstart="startDrag"
        @mousedown="startDrag"
        @touchend="endDrag"
        @mouseleave="endDrag"
        @mouseup="endDrag"
        :disabled="_disabled"
        @change="onChange"
        :x="_mX"
        :style="{
          width: attr.width + 'rpx',
          height: attr.height + 'rpx',
        }"
        class="flex flex-1 flex-row flex-between absolute l-0 t-0"
        direction="horizontal"
      >
        <tm-sheet
          v-if="isRend"
          :shadow="0"
          :outlined="props.outlined"
          :borderStyle="props.borderStyle"
          :borderDirection="props.borderDirection"
          :linearDeep="props.linearDeep"
          :linear="props.linear"
          :round="props.round"
          :color="props.color"
          :text="_disabled"
          :transprent="props.transprent"
          :width="attr.width"
          :height="attr.height"
          :margin="[0, 0]"
          :padding="[0, 0]"
        >
          <slot></slot>
        </tm-sheet>
      </movable-view>
    </movable-area>
  </view>
</template>

<script lang="ts" setup>
/**
 * 左滑操作栏
 * @description  向左滑动显示底部操作按钮栏。
 */
import { computed, nextTick, onMounted, PropType, ref, watch, watchEffect } from "vue";
import { custom_props } from "../../tool/lib/minxs";
import { actionItem } from "./interface";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
const emits = defineEmits(["click", "action-click", "update:open-status"]);
const props = defineProps({
  ...custom_props,
  width: {
    type: Number,
    default: 750,
  },
  height: {
    type: Number,
    default: 88,
  },
  action: {
    type: Array as PropType<Array<actionItem>>,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  transprent: {
    type: Boolean,
    default: false,
  },
  color: {
    type: String,
    default: "white",
  },
  round: {
    type: Number,
    default: 0,
  },
  //当前打开的状态，可以使用v-model:open-status
  openStatus: {
    type: Boolean,
    default: false,
  },
});
let timerId = NaN;
function debounce(func: Function, wait = 500, immediate = false) {
  // 清除定时器
  if (!isNaN(timerId)) clearTimeout(timerId);
  // 立即执行，此类情况一般用不到

  if (immediate) {
    var callNow = !timerId;
    timerId = setTimeout(() => {
      timerId = NaN;
    }, wait);

    if (callNow) typeof func === "function" && func();
  } else {
    // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
    timerId = setTimeout(() => {
      typeof func === "function" && func();
    }, wait);
  }
}
const attr = computed(() => {
  return {
    width: props.width,
    height: props.height,
    disabled: props.disabled,
  };
});
const _disabled = ref(props.disabled);
watchEffect(() => {
  _disabled.value = props.disabled;
});
//宽度。
const _cellwidth = computed(() => uni.upx2px(attr.value.width));
//总实际宽度。
const _cellwidthTotal = computed(() => _cellwidth.value * 2);
const list = computed(() => {
  let lp = props.action.map((el) => {
    return {
      text: el?.text ?? "",
      color: el?.color ?? "white",
      width: el?.width ?? 180,
      icon: el?.icon ?? "",
      ...el,
    };
  });
  return lp;
});
const maxWidth = computed(() => {
  let w = 0;
  for (let i = 0, len = list.value.length; i < len; i++) {
    w += list.value[i].width;
  }
  return uni.upx2px(w);
});
const _x = ref(_cellwidth.value);
const _old_x = ref(_cellwidth.value);
const _mX = ref(_cellwidth.value);
const _isDrag = ref(false);
const isRend = ref(false);
const _animation = ref(false);
const _isCloseAni = ref(true);
let isSwiperAni = false; //当前是否是在滑动当中的复位过程。
let isSwiperAni_x = 0;
let ChaJuli = 0;
let tid = 265988;
let Start_x = 0;
let maxLen = _cellwidth.value - maxWidth.value;
watchEffect(
  () => props.openStatus,
  () => oninit()
);
onMounted(() => {
  nextTick(() => (isRend.value = true));
  setTimeout(() => (_animation.value = true), 300);
});

function oninit() {
  if (props.openStatus) {
    _mX.value = _cellwidth.value;
    uni.$tm.u.debounce(() => {
      _old_x.value = maxLen;
      _mX.value = maxLen;
      Start_x = maxLen;
    }, 40);
  } else {
    _mX.value = _cellwidth.value;
    Start_x = _cellwidth.value;
  }
}
const onChange = (e: Event | TouchEvent) => {
  // #ifndef MP
  _mX.value = e.detail.x;
  if (_isDrag.value) {
    _old_x.value = _mX.value;
  }
  _isDrag.value = false;

  if (_mX.value < maxLen) {
    _disabled.value = true;
  }
  // #endif

  // #ifdef MP
  _x.value = e.detail.x;

  if ((_x.value <= maxLen || _x.value >= _cellwidth.value) && e.detail.source) {
    isSwiperAni = false;
  }
  if (_isDrag.value) {
    _old_x.value = _x.value;
  }
  _isDrag.value = false;
  if (_x.value < maxLen) {
    _disabled.value = true;
  }
  // #endif
};
const startDrag = (e: Event | TouchEvent) => {
  _isDrag.value = true;
};
const endDrag = () => {
  _isCloseAni.value = false;
  if (!attr.value.disabled) {
    _disabled.value = false;
  }
  if (attr.value.disabled) return;

  // #ifndef MP
  _mX.value -= 1;
  ChaJuli = Math.abs(_old_x.value) - Math.abs(_mX.value);
  debounce(
    () => {
      if (ChaJuli > 0) {
        //向左滑动。
        if (ChaJuli >= 10) {
          //恢复到原位。
          // _x.value = _cellwidth.value-maxWidth.value
          _old_x.value = _cellwidth.value - maxWidth.value;
          _mX.value = _old_x.value;
          emits("update:open-status", true);
        } else {
          _x.value = _cellwidth.value;
          _mX.value = _x.value;
          emits("update:open-status", false);
        }
      } else {
        //向右滑动。
        // _x.value = _cellwidth.value
        _old_x.value = _cellwidth.value;
        _mX.value = _cellwidth.value;
        emits("update:open-status", false);
      }
    },
    10,
    false
  );
  // #endif

  // #ifdef MP

  ChaJuli = Start_x - _x.value;
  if (ChaJuli > 0) {
    //向左滑动。
    if (ChaJuli >= 10) {
      //恢复到原位。
      _old_x.value = maxLen;
      _mX.value = _old_x.value;

      emits("update:open-status", true);
    } else {
      _mX.value = _cellwidth.value;
      emits("update:open-status", false);
    }
  } else {
    //向右滑动。
    // _x.value = _cellwidth.value
    _old_x.value = _cellwidth.value;
    _mX.value = _cellwidth.value;
    emits("update:open-status", false);
  }
  Start_x = _mX.value;
  // #endif
};
const onclick = (e: Event) => {
  emits("click", e);
};
const actionClick = (item: actionItem, index: number) => {
  emits("action-click", item, index);
};
</script>

<style></style>
